<template>
    <div class="page">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <h5>网点账单</h5>
                                </el-col>
                                <el-col :span="6" :offset="8">
                                    <div class="block">
                                        <el-date-picker
                                            v-model="queryParams.date"
                                            align="right"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期"
                                            :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-input placeholder="请输入网点名称" v-model="queryParams.network_name"  class="input-with-select">
                                        <el-button slot="append" icon="el-icon-search" @click="queryNetwork"></el-button>
                                    </el-input>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="24" :xs="24" :sm="24" :lg="24">
                                    <el-table :data="listData.data" style="width: 100%" v-loading="listLoading" @row-click="rowClick">
                                        <el-table-column
                                            prop="date"
                                            label="日期">
                                        </el-table-column>
                                        <el-table-column
                                            prop="network_name"
                                            label="网点名称">
                                        </el-table-column>
                                        <el-table-column
                                            prop="network_total"
                                            label="签收件">
                                        </el-table-column>
                                        <el-table-column
                                            prop="network_total_income"
                                            label="应收">
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="panel-footer text-right">
                            <el-pagination @size-change="sizeChange" @current-change="currentChange"
                                           :current-page="queryParams.page"
                                           :page-sizes="[5, 10, 20, 50]"
                                           :page-size="queryParams.paginate"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="listData.total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="detailDialog" width="40%" :before-close="handleDetailClose">
            <div slot="title" class="dialog-header dialog_head">
                <el-row type="flex"  justify="space-between" :gutter="20">
                    <el-col :span="6"><h3 >{{currentData.network_name}}</h3></el-col>
                    <el-col :span="6"><h3 >{{currentData.date}}</h3></el-col>
                </el-row>
            </div>
            <el-card class="box-card" v-for="(v,k) in detailData.data" :key="k">
                <div slot="header" class="clearfix">
                    <span class="whiteFont">{{v.service_name}}</span>
                </div>
                <div  class="text item">
                    <p>签收件：{{v.total_sign}}</p>
                    <p>单价：{{v.unit_price}}</p>
                    <p>收入：{{v.total_income}}</p>
                </div>
            </el-card>
            <div class="panel-footer text-right">
                <el-pagination @size-change="sizeChangeForDetail" @current-change="currentChangeForDetail"
                               :current-page="detailQueryParams.page"
                               :page-sizes="[2, 3, 5, 10]"
                               :page-size="detailQueryParams.paginate"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="detailData.total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import api from '../apis'
    export default {
        name: "Billing",
        data(){
            return {
                //列表加载动画
                listLoading:false,
                //列表请求参数
                queryParams:{
                    date:'',
                    network_name:'',
                    page:1,
                    paginate:10,
                },
                detailQueryParams:{
                    date:'',
                    page:1,
                    paginate:2,
                },
                //列表数据
                listData:{
                    data:[],
                    total:0,
                },
                //详情数据
                detailData:{
                    data:[],
                    total:0,
                },
                //当前网点名称&id&日期
                currentData:{
                    network_id:'',
                    network_name:'',
                    date:'',
                },
                detailDialog:false,
                //日期选择快捷选项
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        methods:{
            /**
             * 请求网点列表
             */
            queryNetwork(){
                this.listLoading = true;
                api.billing.fetch(this.queryParams).then(response=>{
                    this.listData =  response.data;
                    this.listLoading = false;
                }).catch(errors=>{
                    this.$message.error('请求失败');
                })
            },
            /**
             * 根据id请求详情
             */
            fetchById(){
                api.billing.fetchById(this.currentData.network_id,this.detailQueryParams).then(response=>{
                    this.detailData = response.data;
                }).catch(errors=>{
                    this.$message.error('请求失败')
                })
            },
            /**
             * 行点击
             */
            rowClick(row, event, column){
                this.detailQueryParams.date = row.date;
                this.currentData.network_id = row.network_id;
                this.currentData.network_name = row.network_name;
                this.currentData.date = row.date;
                this.fetchById();
                this.detailDialog = true;
            },
            /**
             * 列表改变每页数量
             * @param size
             */
            sizeChange(size){
                this.queryParams.paginate = size;
                this.queryExpress();
            },
            /**
             * 详情列表改变每页数量
             */
            sizeChangeForDetail(size){
                this.detailQueryParams.paginate = size;
                this.fetchById();
            },
            /**
             * 列表改变当前页
             * @param page
             */
            currentChange(page){
                this.queryParams.page = page;
                this.queryExpress();
            },
            /**
             * 详情列表改变当前页
             */
            currentChangeForDetail(page){
                this.detailQueryParams.page = page;
                this.fetchById();
            },
            /**
             * 关闭编辑对话框
             */
            handleDetailClose(){
                this.detailDialog = false;
            },
        },
        mounted(){
            this.queryNetwork();
        }
    }
</script>

<style lang="scss" scoped>
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 100%;
    }
    .box-card{
        width: 50%;
        margin: 10px auto;
    }
    .dialog_head{
        border-bottom: 1px solid #ebeef5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>
